<template>
    <div>

        <Form ref="formSearch" :model="formSearch" :rules="searchFormRules" :label-width="80">

            <Row>
                <Col span="7">
                    <FormItem label="Name" prop="name">
                        <Input v-model="formSearch.name" placeholder="Enter your name"></Input>
                    </FormItem>
                </Col>

                <Col span="7">
                    <FormItem label="Email" prop="mail">
                        <Input v-model="formSearch.mail" placeholder="Enter your mail"></Input>
                    </FormItem>
                </Col>
                <Col span="7">
                    <FormItem label="City" prop="city">
                        <Select v-model="formSearch.city" placeholder="Select your city">
                            <Option value="beijing">New York</Option>
                            <Option value="shanghai">London</Option>
                            <Option value="shenzhen">Sydney</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>

            <Row>
                <Col span="7">
                    <FormItem label="Gender" prop="gender">
                        <dict-select v-model="formSearch.gender" :kind="this.constants.dicts.dictKinds.STD_GENDER" :clearable="true"></dict-select>
                    </FormItem>
                </Col>

                <Col span="7">
                    <FormItem label="Gender">
                        <dict-checkbox value="2" :kind="this.constants.dicts.dictKinds.STD_GENDER" :clearable="true"></dict-checkbox>
                    </FormItem>
                </Col>


            </Row>
            <Row>
                <Col span="4" offset="20">
                    <Form-item>
                        <Button type="primary" @click="loadPageNoChange(1)" :loading="loading">查询</Button>
                    </Form-item>
                </Col>
            </Row>

        </Form>


        <add v-on:refreshList="loadData()"></add>
        <edit ref="editModal" v-on:refreshList="loadData()"></edit>

        <Table border :columns="columns" :data="queryResult.dataList" :loading="loading"></Table>

        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="queryResult.pageQuery.totalCount" :pageSize="queryResult.pageQuery.pageSize"
                      :current="queryResult.pageQuery.pageNo" @on-page-size-change="loadPageSizeChange"
                      @on-change="loadPageNoChange" show-total show-elevator show-sizer></Page>
            </div>
        </div>
    </div>
</template>
<script>
    import add from './add.vue';
    import edit from './edit.vue';
    import dictSelect from '@/views/common/dict/DictSelect'
    import dictCheckbox from '@/views/common/dict/DictCheckBox'
    import dictRadio from '@/views/common/dict/DictRadio'

    import tableDefine from './tableDefine.js'
    import * as renderUtil from '@/libs/renderUtil.js'

    var sampleList = [
        {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            gender: 1,
            label: 1,
            created: 1525194893467
        },
        {
            name: 'Kitty Shaw',
            age: 24,
            address: 'London No. 1 Lake Park',
            gender: 2,
            label: 1,
            created: 1525194893467
        },
        {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            gender: 1,
            label: 2,
            created: 1525194893467
        },
        {
            name: 'Lucy Trump',
            age: 26,
            gender: 2,
            label: 2,
            address: 'Ottawa No. 2 Lake Park'
        }
    ]

    export default {
        mixins: [tableDefine],
        methods: {
            loadPageSizeChange(pageSize) {
                this.queryResult.pageQuery.pageSize = pageSize
                this.loadData()
            },
            loadPageNoChange(pageNo) {
                this.queryResult.pageQuery.pageNo = pageNo
                this.loadData()
            },
            loadData() {
                var _this = this

                this.$refs['formSearch'].validate((valid) => {
                    if (valid) {
                        var searchParam = this.formSearch
                        this.queryResult.dataList = sampleList
                        this.queryResult.pageQuery.totalCount = sampleList.length
                        this.loading = true
                        setTimeout(function () {
                            _this.loading = false
                        }, 1000)
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            editItem: function (item) {
                this.$refs.editModal.editItem(item)
            }
        },
        components: {
            add,
            edit,
            dictSelect,
            dictCheckbox,
            dictRadio
        }
    }

</script>